import React from 'react';
import './style/';
import {WeaTools,WeaLocaleProvider} from "ecCom";
import objectAssign from "object-assign";
import {Carousel, Checkbox} from 'antd';
import Setting from "./setting";
import E7Form from "./E7Form";
class E7Login extends React.Component {


    state = {
        data:{
            id:'',
            setting:{},
        },
        settingVisiable:false,

    }

    setStateData = (data)=>{
        this.setState(data)
    }

    load = (id)=>{
        WeaTools.callApi('/api/portal/E7form/saveInitE7form', 'POST', {"json":JSON.stringify({id:id,setting:JSON.stringify({})})}).then((result) => {
            if (result.status == true) {
                if(result.data != null){
                    let data = result.data
                    data.setting = JSON.parse(data.setting)
                    this.setState({data:data})
                }
            }
        });
    }

    componentWillMount(){
        const id = this.props.id
        this.load(id)
    }


    render(){
        const {logoImage,bgImage} = this.state.data.setting
        const {id,isSetting} = this.props;
        let logoImageComp = <div/>;
        if (logoImage) {
            const logoImageArr = logoImage.split(',');
            if (logoImageArr.length > 1) {
                logoImageComp = (
                    <Carousel autoplay={true} dots={true}>
                        {
                            logoImageArr.slice(0, 3).map((item, index) => {
                                return (
                                    <div key={index} style={{width:'976px',height:'280px',overflow:'hidden'}}>
                                        <img src={item} alt=""/>
                                    </div>
                                );
                            })
                        }
                    </Carousel>
                );
            } else {
                logoImageComp = <img src={logoImage} alt=""/>
            }
        } else {
            const logoImageArr = [
                '/wui/theme/ecology7/page/images/login/lg_bg1_wev8.jpg',
                '/wui/theme/ecology7/page/images/login/lg_bg2_wev8.jpg',
                '/wui/theme/ecology7/page/images/login/lg_bg3_wev8.jpg'
            ];
            logoImageComp = (
                <Carousel autoplay={true} dots={true}>
                    {
                        logoImageArr.slice(0, 3).map((item, index) => {
                            return (
                                <div key={index} style={{width:'976px',height:'280px',overflow:'hidden'}}>
                                    <img src={item} alt=""/>
                                </div>
                            );
                        })
                    }
                </Carousel>
            );
        }

        let bgImageSrc = '/wui/theme/ecology7/page/images/login/login_cbg_wev8.png';
        if (bgImage) {
            bgImageSrc = bgImage;
        }
        return (
            <div className={"E7form"} style={{height:'100%',position:'relative'}} onMouseLeave={()=>{$(".lr_settingButtons_"+id).hide()}} onMouseEnter={()=>{$(".lr_settingButtons_"+id).show()}}>
                <div style={{width:'1050px',height:'650px','background-image':'url('+bgImageSrc+')' ,'background-size':'100% 100%',position:'relative',margin:'0 auto'}} >
                    <div style={{position:'absolute',overflow:'hidden',width:'980px',height:'280px','margin-left':'35px','margin-top':'125px'}}>
                        {logoImageComp}
                    </div>
                    <div style={{position:'absolute',width:'240px',height:'180px',top:'416px',left:"767px"}}>
                        <E7Form/>
                    </div>

                </div>
                <Setting state={this.state} setStateData={this.setStateData} ></Setting>
                {
                    isSetting == true
                        ?(
                            <div className={"lr_settingButtons_"+id +" lr_settingButtons_class"}>
                                <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {this.setState({settingVisiable:true}) }}></span>
                            </div>
                        ):""
                }
            </div>
        );
    }



}
export default E7Login;